<template>
  <div>
    <van-popup :value="show" position="bottom" @input="$emit('update:show', $event)">
      <div class="van-popup-content">
        <div class="title">
          <span>保证金模式</span>
          <span>保证金模式管理 <van-icon name="arrow"/></span>
        </div>
        <div class="box">
          <div class="title">全仓</div>
          <div class="con">所有仓位公用保证金，盈亏互抵·低于强平风险，但可能损失全部仓位</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Model',
  components: {
    [Popup.name]: Popup,
  },
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      active: 1,
    }
  },
  methods: {
    handleClick(index) {
      this.active = index;
      this.$emit('select', this.options[index]);
      this.$emit('update:show', false);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
  // width: 92% !important;
  background: #121212 !important;
  border-radius: 40px 40px 0 0;

  .van-popup-content {
    padding: 40px 30px;
    padding-bottom: 60px;
    background: #121212;
    color: #fff;
    display: grid;
    gap: 20px;
    position: relative;
    overflow: hidden;

    > .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26px;
    }

    .box {
      border: 1px solid #262626;
      border-radius: 20px;
      padding: 30px;
      margin-top: 10px;

      > .title {
        font-size: 30px;
      }

      > .con {
        font-size: 26px;
        color: #AFAFAF;
        margin-top: 8px;
      }
    }
  }
}
</style>
